// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.mp-history-player-score {
  .default-border-radius();
  .default-box-shadow();

  --padding-h: 20px;
  --padding-left-desktop: var(--padding-h);
  --shapes-display: none;
  --shapes-size: 0;
  background-color: @osu-colour-b2;
  display: grid;
  grid-template-columns: var(--shapes-size) 1fr;

  &--team {
    --padding-left-desktop: 0;
    --shapes-display: block;
    --shapes-size: 10px;
  }

  @media @desktop {
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  &__beatmap-version {
    font-size: @font-size--title-small;
    // forces the link to be a block and applies overflow truncation
    display: flex;
  }

  &__country-flag {
    align-self: center;
  }

  &__shapes {
    width: auto; // follows grid
    background-size: cover;
    display: var(--shapes-display);

    border-radius: @border-radius-base 0 0 @border-radius-base;

    @media @desktop {
      background-size: contain;
      background-position: bottom left;
      background-repeat: no-repeat;
    }
  }

  &__main {
    padding: 10px 20px;
    display: grid;
    // for mods and rank element (in mobile), using order and grid-column combination
    grid-template-columns: 1fr auto;
    gap: 5px;
    grid-column: 2 / -1;

    @media @desktop {
      padding-left: var(--padding-left-desktop);
      padding-right: var(--padding-h);
      display: grid;
      grid-template-columns: subgrid;
      gap: 0; // TODO: using "0 20px" here causes overflow in stats area in firefox
      align-items: center;
    }
  }

  &__info-box {
    display: flex;
    grid-column: 1 / -1;

    @media @desktop {
      padding: 0 10px; // TODO: replace with gap at __main if fixed in firefox
      grid-column: initial;
    }

    &--mods {
      // TODO: replace with proper compact mod display
      max-width: 144px; // 4x31px (4x mod size) + 10px (padding both sides)
      flex-wrap: wrap;
      order: 1;
      grid-column: 1 / 2;
      @media @desktop {
        order: 0;
        grid-column: initial;
      }
    }

    &--rank {
      order: 1;
      grid-column: 2 / 3;
      @media @desktop {
        padding-right: 0; // TODO: replace with gap at __main if fixed in firefox
        order: 0;
        grid-column: initial;
      }
    }

    &--stats {
      flex-direction: row-reverse;
      align-items: baseline;
      gap: 2px;

      @media @desktop {
        align-items: center;
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 3 / 6;
        gap: 3px 0;
      }
    }

    &--user {
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      min-width: 0;
      @media @desktop {
        padding-left: 0; // TODO: replace with gap at __main if fixed in firefox
      }
    }
  }

  &__username {
    .ellipsis-overflow();
    font-weight: 700;
    font-size: 18px;
  }

  &__username-box {
    display: flex;
    gap: 5px;
  }

  &__stat-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    flex-direction: column;
    flex: 1;
    gap: 3px;

    @media @desktop {
      flex-direction: row;
      gap: 20px;
      grid-column: 1 / -1;
    }

    &--first {
      flex-direction: column-reverse;

      @media @desktop {
        display: grid;
        grid-template-columns: subgrid;
        gap: 40px;
      }
    }
  }

  &__mods {
    --mod-height: @mod-height-normal;
    display: flex;
    height: var(--mod-height);
  }

  &__stat {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;

    &--small {
      flex: none;
    }
  }

  &__stat-label {
    padding-right: 3px;
    color: @osu-colour-c2;

    font-size: 10px;
    text-transform: uppercase;
  }

  &__stat-number {
    font-weight: 700;
    color: @osu-colour-c1;
    line-height: 1;

    &--small {
      font-size: 12px;
    }

    &--medium {
      font-size: 14px;
    }

    &--large {
      font-size: 20px;
      color: @osu-colour-pink-1;

      @media @desktop {
        font-size: 25px;
      }
    }
  }

  &__value {
    &--perfect {
      color: hsl(@beatmap-score--hsl-perfect);
    }
  }
}
